<template>
<div class="contentbox">
    <el-form>
      <!-- <div>我是组件建立任务</div> -->
        <el-form-item label="活动名" label-width="70px">
          <el-input v-model="form.avtive" class="handle-input" placeholder="例:[堂食问卷调研]Hao呗来啦...."></el-input>
        </el-form-item>
        <el-form-item label="活动时间"  label-width="70px">
                <el-date-picker
                    class='mr10'
                    v-model="eldate"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions">
                </el-date-picker>
        </el-form-item>
        <el-form-item label="活动标语" label-width="70px">
          <el-input v-model="form.title" class="handle-input" placeholder="请输入活动标语"></el-input>
        </el-form-item>
        <el-form-item label="海报" label-width="70px">
                  <el-upload
                    class="avatar-uploader"
                      ref="upload"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :file-list="fileList"
                      :auto-upload="false"
                          >
                    <img slot="trigger" v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
        </el-form-item>
        <el-form-item label="消费方式" label-width="70px">
                <el-select v-model="value" placeholder="活动类型" class='mr10'>
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
        </el-form-item>
        <!-- 富文本 -->
        <el-form-item label="活动详情" label-width="70px">
          <quill-editor ref="myTextEditor" v-model="form.content" :options="editorOption"></quill-editor>
        </el-form-item>
        <el-form-item style="text-align: center">
            <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写预算分配</el-button>
        </el-form-item>
    </el-form>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';

export default {
  data(){
    return {
      form:{
        avtive:'',//活动名
        eldate:'',//开始结束时间
        imageUrl:'',//上传图片
        content: '', //富文本内容
        title:'',//活动标语
      },
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
    options: [{
            value: '选项1',
            label: '外卖'
            }, {
            value: '选项2',
            label: '堂食'
            }, {
            value: '选项3',
            label: '外卖和堂食'
            }],
    editorOption: {
        placeholder: '请输入活动详情'
    },
            pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        eldate:''//活动日期
  }

  },
    components: {
      quillEditor
  },
  methods:{
        handleNext(formName){
        // this.$refs[formName].validate((valid) => {
          // if (valid) {
            this.$emit('nextStep');
            this.$refs.upload.submit();
            console.log(this.$refs.upload.submit(),'图片')
        //   } else {
        //     this.$message({
        //       message: '验证失败',
        //       type: 'error',
        //       duration:1000
        //     });
        //     return false;
        //   }
        // });
      },
      onEditorChange({ editor, html, text }) {
          this.content = html;
      },
      submit(){
          console.log(this.content);
          this.$message.success('提交成功！');
      },
            //上传图片有关函数
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }

}
}
</script>

<style scoped>
.contentbox {
  /* border: #c0c4cc solid 1px; */
  padding: 40px 0 0;
  margin: 20px auto 0px;
  width: 1000px;
}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
.el-upload--text {
    width: 180px;
  }

</style>